<template>
  <div style="margin-top: 30px;margin-left:200px; width: 700px;">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input tyep="password" v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name" style="width: 500px"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
                <div style="width: 170px;height: 30px;">
                    <template>
                        <el-radio v-model="ruleForm.sex" label="男">男</el-radio>
                        <el-radio v-model="ruleForm.sex" label="女">女</el-radio>
                    </template>
                </div>
            </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="ruleForm.age" style="width: 100px"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone" style="width: 500px"></el-input>
      </el-form-item>

     <!--  <el-form-item label="公司" prop="cpId">
        <el-select v-model="ruleForm.cpId" placeholder="请选择公司">
        <el-option v-for="item in company" :label="item.name" :value="item.cpId"></el-option>
        </el-select>
      </el-form-item> -->
      
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() 
  {
    return {
      ruleForm: {
        username:"",
        password:"",
        name: "",
        phone:"",
        age:"",
        sex:"",
       /*  cpId:"", */
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请选输入密码", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [ {required: true,message: "请输入联系人电话",trigger: "blur"},
          { min: 11, max: 11, message: "长度在 11个字符", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
       /*  cpId: [{ required: true, message: "请选择公司", trigger: "change" }] */}
    };
  },
  methods: {
    submitForm(formName) {
      const _this = this;
      this.$refs[formName].validate(valid => {
        //提交后
         if (valid) {
          /*    console.log(_this.ruleForm) */
                        axios.put('http://localhost:8182/companyuser/update',_this.ruleForm).then(function (resp) {
                            if(resp.data.code == 0){
                                _this.$alert(_this.ruleForm.name+'修改成功', '', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        _this.$router.push('/companyuserMessage')
                                    }
                                });
                            }
                        })
                    }
                });
            },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  //拿后台数据
     created(){
      const _this = this
      axios.get('http://localhost:8182/companyuser/findById/'+_this.$route.query.id).then(function(resp){
        _this.ruleForm=resp.data.data
      })
      /* console.log(_this.$route.query.id) */
    }
};
</script>